<template>
	<view class="wrap">
		<view class="main">
			<view class="user-info">
				<view class="b-item">
					<view class="s-tit">旧手机号</view>
					<text class="s-input">{{form.oldPhone}}</text>
				</view>
				<template v-if="loginMethods.indexOf('phone_captcha') !== -1">
					<view class="b-item">
						<view class="s-tit">新手机号</view>
						<input class="s-input" :value="form.newPhone" minlength="11" maxlength="11" @input="onInput"
							data-field="newPhone" placeholder="请输入新手机号" />
					</view>
					<view class="b-item">
						<view class="s-tit">验证码</view>
						<input class="s-input" :value="form.newCaptcha" maxlength="12" @input="onInput"
							data-field="newCaptcha" placeholder="请输入验证码" />
						<view class="s-captcha" :class="{ disable: captcha.second > 0 }" @click="onPhoneCaptcha">
							<text v-if="!captcha.retry && !captcha.second">获取验证码</text>
							<text v-else-if="captcha.second > 0">重新获取 {{ captcha.second }}秒</text>
							<text v-else-if="captcha.retry">重新获取</text>
						</view>
					</view>
				</template>
			</view>
			<template v-if="loginMethods.indexOf('phone_captcha') !== -1">
				<view class="btn-save" :class="{ disable: disable.submit }" @click="onSave">保存修改</view>
			</template>
			<!-- #ifdef  MP-WEIXIN -->
			<button class="btn-save f-wechat open-data-btn" open-type="getPhoneNumber"
				@getphonenumber="onGetPhoneNumber" v-if="loginMethods.indexOf('wechat_phone') !== -1">授权手机号</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		sendPhoneCaptcha,
		changePhone,
		changeWechatPhone
	} from '@/service/api/user.js'
	import mixinsCommon from '@/mixins/common.js'
	import mixinsAuth from '@/mixins/auth.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				form: {
					oldPhone: '',
					newPhone: '',
					newCaptcha: ''
				},
				disable: {
					submit: false
				},
				captcha: {
					retry: false,
					second: 0,
				}
			}
		},
		onLoad() {
			getUserInfo().then(([err, res]) => {
				console.log('getUserInfo', err, res)
				if (!err) {
					this.form.oldPhone = res.phone
				}
			})
		},
		computed: {
			loginMethods() {
				return this.$store.getters.globalConfig.login_methods || []
			},
		},
		methods: {
			onInput(e) {
				console.log('onInput', e)
				const field = e.target.dataset.field
				this.form[field] = e.detail.value
			},
			onPhoneCaptcha() {
				if (this.disable.captcha) {
					return
				}
				if (!this.form.newPhone) {
					return this.$logic.showToast('新手机号不能为空')
				}
				if (this.form.newPhone.length != 11) {
					return this.$logic.showToast('新手机号长度必须为11位')
				}
				if (this.form.newPhone == this.form.oldPhone) {
					return this.$logic.showToast('未修改手机号')
				}
				this.disable.captcha = true
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					sendPhoneCaptcha(this.form.newPhone, res ? res.code : '', false).then(([err, res]) => {
						console.log('sendPhoneCaptcha', err, res)
						if (!err) {
							uni.showToast({
								title: '发送成功'
							})

							// 验证码倒计时
							this.captcha.second = 60
							var interval = setInterval(() => {
								this.captcha.second--
							}, 1000)
							setTimeout(() => {
								clearInterval(interval)
								this.captcha.retry = true
								this.captcha.second = 0
								this.disable.captcha = false
							}, this.captcha.second * 1000)
						} else {
							this.disable.captcha = false
						}
					})
				})
			},
			onSave() {
				if (this.disable.submit) {
					return;
				}
				if (!this.form.newPhone) {
					return this.$logic.showToast('新手机号不能为空')
				}
				if (this.form.newPhone.length != 11) {
					return this.$logic.showToast('新手机号长度必须为11位')
				}
				if (this.form.newPhone == this.form.oldPhone) {
					return this.$logic.showToast('未修改手机号')
				}
				if (!this.form.newCaptcha) {
					return this.$logic.showToast('验证码不能为空')
				}
				this.disable.submit = true
				changePhone(this.form.newPhone, this.form.newCaptcha).then(([err, res]) => {
					console.log('changePhone', err, res)
					this.disable.submit = false
					if (!err) {
						this.$logic.showToast('修改成功').then(([err, res]) => {
							uni.reLaunch({
								url: '/pages/user/mine'
							})
						})
					}
				})
			},
			onGetPhoneNumber(e) {
				console.log('onGetPhoneNumber', e)
				if (e.detail.errMsg.indexOf(':ok') === -1) {
					// fail user deny
					// this.$logic.showToast(e.detail.errMsg.replace('getPhoneNumber:', ''))
					return
				}
				uni.showLoading({
					title: '修改手机号中'
				})
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					changeWechatPhone(e.detail.encryptedData, e.detail.iv, e.detail.code || '',
						res ? res.code : '').then(([
						err, res
					]) => {
						console.log('changeWechatPhone', err, res)
						uni.hideLoading()
						if (!err) {
							this.$logic.showToast('修改成功').then(([err, res]) => {
								uni.reLaunch({
									url: '/pages/user/mine'
								})
							})
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding: 0 40upx;
	}

	.user-info {
		margin-top: 40upx;
		background: #fff;
		border-radius: 20upx;

		.b-item {
			padding: 0 40upx;
			border-bottom: 1upx solid $pq-bg-color;
			height: 100upx;
			display: flex;
			align-items: center;
			position: relative;

			.s-tit {
				color: #000000;
				font-size: 26upx;
			}

			.s-input {
				flex: 1;
				color: #808080;
				text-align: right;
				font-size: 26upx;
			}

			.s-captcha {
				margin-left: 20upx;
				padding: 0 30upx;
				background: #fff;
				border: 2upx #ccc solid;
				height: 64upx;
				line-height: 64upx;
				border-radius: 32upx;
				color: #808080;
				font-size: 24upx;

				&.disable {
					color: #999;
				}
			}
		}
	}

	.btn-save {
		margin-top: 50upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		background: #DA5650;
		border-radius: 50upx;
		letter-spacing: 10upx;

		&.f-wechat {
			background: #35C773;
		}
	}
</style>
